前言

上一篇在 Angular 專案安裝完了 Cypress 框架，這篇開始來實際針對範例程式加入端對端的測試程式。

Cypress 測試檔案

在利用 Angular Schematics 安裝完 Cypress 後，就可以看到專案目錄內會多了 cypress 資料夾，我們會將整個應用程式的端對端測試程式，撰寫 .cy.ts 的檔案內，並儲存在這裡面的 e2e 資料夾，之後文章會使用 application.cy.ts 與 login.cy.ts 這兩個檔案來說明。

測試案例的撰寫

測試案例描述與群組化

與 Jasmine 相同，在 Cypress 裡會使用 it 方法來建一個測試案例，以及使用 describe 方法來把多個測試案例群組化。

describe('2022 鐵人賽範例', () => {
  it('顯示標題為 "2022 鐵人賽範例"', () => {
    ...
  });

  it('進入商品清單頁面', () => {
    ...
  });
});

除此之外，Cypress 也提供了 context 與 specify 兩個方法，來群組化與描述測試案例，因此上面程式也可以寫成：

context('2022 鐵人賽範例', () => {
  specify('顯示標題為 "2022 鐵人賽範例"', () => {
    ...
  });

  specify('進入商品清單頁面', () => {
    ...
  });
});

只執行特定測試案例

如果想只針對特定案例進行測試，在 Cypress 裡會使用 only 方法來指定。如下面程式，在 it 或 describe 後加入 only 就可以只針對「進入商品清單頁面」進行測試。

describe('2022 鐵人賽範例', () => {
  it('顯示標題為 "2022 鐵人賽範例"', () => {
    ...
  });

  it.only('進入商品清單頁面', () => {
    ...
  });
});

不執行特定測試案例

相反的，如果不希望不執行特定的測試案例，則會使用 skip 來指定。

describe('2022 鐵人賽範例', () => {
  it('顯示標題為 "2022 鐵人賽範例"', () => {
    ...
  });

  it.skip('進入商品清單頁面', () => {
    ...
  });
});

生命週期鉤子

Cpyress 也提供了四個生命週期鉤子，依執行順序是：

before

此方法會在所有的測試案例或群組執行之前只被呼叫一次，其語法為：

before(() => {});

端對端測試會使用資料庫的資料進行測試，因此在執行測試前會需要初始化測試所需要的資料，目前實務上常會使用 Docker 來完成初始化作業；除此之外，我們也可以在此方法中來建立初始化資料。

describe('使用者登入', () => {
  before(() => {
    cy.request('POST', 'http://localhost:3000/users', {
      id: 'userA',
      password: '1234567',
    });
  });
});

在 login.cy.ts 檔案中，如上面程式，我們在 before() 方法中，利用 cy.request() 方法呼叫 Json Server 的 API 來新增使用者資料。

beforeEach

此方法會在每一個測試案例或群組執行之前被呼叫一次，其語法為：

beforeEach(() => {});

例如在測試登入作業前，要載入登入的頁面時，就可以把「載入頁面」的動作放在這個方法裡面。

describe('使用者登入', () => {
  before(() => {
    cy.request('POST', 'http://localhost:3000/users', {
      id: 'userA',
      password: '1234567',
    });
  });

  beforeEach(() => {
    cy.visit('/');
    cy.get('button.mat-icon-button').eq(1).click();
  });

  it('當點選登入按鈕, 應轉至登入頁面', () => {
    ...
  });

  ...
});

afterEach

此方法會在每一個測試案例或群組執行完後被呼叫一次，其語法為：

afterEach(() => {});

after

此方法會在所有的測試案例或群組執行完後只被呼叫一次，其語法為：

after(() => {});

如先前的範例中，我們在 before() 方法中新增測試用的資料，接著在測試完就可以把資料移除，以避免之後測試執行因而失敗。

describe('使用者登入', () => {
  before(() => {
    cy.request('POST', 'http://localhost:3000/users', {
      id: 'userA',
      password: '1234567',
    });
  });

  beforeEach(() => {
    cy.visit('/');
    cy.get('button.mat-icon-button').eq(1).click();
  });

  after(() => {
    cy.request('DELETE', 'http://localhost:3000/users/userA');
  });

  ...
});

測試資料的新增與移除會依測試案例的狀況，而寫在 beforeEach() 與 afterEach() 方法中。

接下來

這一篇介紹了在 Cypress 中描述與群組化測試案例的方法以及生命週期鉤子方法，完整的測試程式可以參考 GitHub。接下來會說明如何利用 Cypress 來撰寫端對端測試程式。